<template>
  <view class="flex flex-col min-h-[100vh] bg-[#f0f9ff] p-[20rpx_0]">
    <!-- 主容器 -->
    <view class="w-[750rpx] bg-white rounded-[25rpx] shadow-[0_15rpx_50rpx_rgba(0,100,200,0.15)] overflow-hidden mx-auto relative">
      <!-- 头部区域 -->
      <view class="bg-[#1a73e8] text-white p-[25rpx_40rpx] relative">
        <view class="flex justify-between items-center mb-[15rpx]">
          <!-- <nut-button
            class="bg-[rgba(255,255,255,0.2)] border-none rounded-full w-[45rpx] h-[45rpx] text-white text-[20rpx] transition-all duration-300 flex items-center justify-center hover:bg-[rgba(255,255,255,0.3)] hover:scale-105"
            @click="goBack"
          >
            <IconFont name="arrow-left" />
          </nut-button> -->
          <text class="text-[32rpx] font-semibold tracking-[1rpx] text-shadow-[0_2rpx_4rpx_rgba(0,0,0,0.2)]">服务对象个人基本信息</text>
          <view></view>
          <!-- 占位元素 -->
        </view>

        <text class="text-[18rpx] opacity-90 max-w-[600rpx] leading-[1.6] block">管理个人基本信息、健康凭证及相关账户信息</text>

        <!-- 标签页 -->
        <nut-tabs v-model="activeTab" class="mt-[25rpx] border-b-[1rpx] border-b-[rgba(255,255,255,0.2)]">
          <nut-tab-pane
            v-for="(tab, index) in tabs"
            :key="index"
            :title="tab.title"
            class="p-[12rpx_25rpx] text-[18rpx] cursor-pointer relative opacity-80 transition-all duration-300"
            :class="{ 'opacity-100 font-semibold': activeTab === index }"
          >
          </nut-tab-pane>
        </nut-tabs>
      </view>

      <!-- 表单内容区域 -->
      <view scroll-y class="p-[30rpx_40rpx]">
        <!-- 基本信息部分 -->
        <view class="mb-[40rpx] border-b-[1rpx] border-b-[#eee] pb-[30rpx]">
          <view class="flex items-center mb-[25rpx]">
            <view
              class="w-[50rpx] h-[50rpx] bg-[#64b5f6] rounded-[12rpx] flex items-center justify-center text-white text-[24rpx] shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] mr-[15rpx]"
            >
              <IconFont name="user" />
            </view>
            <text class="text-[24rpx] font-semibold text-[#1a73e8]">个人基本信息</text>
          </view>

          <view class="grid grid-cols-2 gap-[25rpx_30rpx]">
            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="signature" class="mr-[8rpx] text-[#1a73e8]" /> 姓名 </text>
              <nut-input
                v-model="userInfo.name"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="mobile-alt" class="mr-[8rpx] text-[#1a73e8]" /> 联系方式 </text>
              <nut-input
                v-model="userInfo.phone"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="id-card" class="mr-[8rpx] text-[#1a73e8]" /> 身份证号码 </text>
              <nut-input
                v-model="userInfo.idCard"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="qrcode" class="mr-[8rpx] text-[#1a73e8]" /> 电子健康码 </text>
              <nut-input
                v-model="userInfo.healthCode"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="key" class="mr-[8rpx] text-[#1a73e8]" /> AnfinelD </text>
              <nut-input
                v-model="userInfo.anfinelId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="file-medical" class="mr-[8rpx] text-[#1a73e8]" /> 健康档案编号 </text>
              <nut-input
                v-model="userInfo.healthRecordId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="passport" class="mr-[8rpx] text-[#1a73e8]" /> 其他身份证件 </text>
              <nut-input
                v-model="userInfo.otherId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative col-span-2">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="heartbeat" class="mr-[8rpx] text-[#1a73e8]" /> 个人健康服务凭证 </text>
              <nut-input
                v-model="userInfo.healthCard"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>
          </view>
        </view>

        <!-- 其他信息部分 -->
        <view class="mb-[40rpx] border-b-[1rpx] border-b-[#eee] pb-[30rpx]">
          <view class="flex items-center mb-[25rpx]">
            <view
              class="w-[50rpx] h-[50rpx] bg-[#64b5f6] rounded-[12rpx] flex items-center justify-center text-white text-[24rpx] shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] mr-[15rpx]"
            >
              <IconFont name="info-circle" />
            </view>
            <text class="text-[24rpx] font-semibold text-[#1a73e8]">其他信息</text>
          </view>

          <view class="grid grid-cols-2 gap-[25rpx_30rpx]">
            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="receipt" class="mr-[8rpx] text-[#1a73e8]" /> 订单编号 </text>
              <nut-input
                v-model="userInfo.orderId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="credit-card" class="mr-[8rpx] text-[#1a73e8]" /> 会员卡号 </text>
              <nut-input
                v-model="userInfo.memberId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="wallet" class="mr-[8rpx] text-[#1a73e8]" /> 储值卡号 </text>
              <nut-input
                v-model="userInfo.storedCardId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="star" class="mr-[8rpx] text-[#1a73e8]" /> 积分卡号 </text>
              <nut-input
                v-model="userInfo.pointsCardId"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative col-span-2">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="home" class="mr-[8rpx] text-[#1a73e8]" /> 常住详细地址 </text>
              <nut-input
                v-model="userInfo.address"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>

            <view class="relative col-span-2">
              <text class="block mb-[8rpx] font-medium text-[16rpx] text-[#555] flex items-center"> <IconFont name="link" class="mr-[8rpx] text-[#1a73e8]" /> 客户端信息关联 </text>
              <nut-input
                v-model="userInfo.clientInfo"
                class="w-full p-[14rpx_15rpx] border-[1rpx] border-[#ddd] rounded-[10rpx] text-[16rpx] transition-all duration-300 bg-[#f9fbfd] focus:border-[#1a73e8] focus:shadow-[0_0_0_3rpx_rgba(26,115,232,0.1)]"
              />
            </view>
          </view>
        </view>

        <!-- 关联信息部分 -->
        <view class="mb-[40rpx] pb-[30rpx]">
          <view class="flex items-center mb-[25rpx]">
            <view
              class="w-[50rpx] h-[50rpx] bg-[#64b5f6] rounded-[12rpx] flex items-center justify-center text-white text-[24rpx] shadow-[0_4rpx_12rpx_rgba(26,115,232,0.3)] mr-[15rpx]"
            >
              <IconFont name="users" />
            </view>
            <text class="text-[24rpx] font-semibold text-[#1a73e8]">关联信息</text>
          </view>

          <view class="flex gap-[20rpx] mb-[25rpx]">
            <!-- 监护人信息卡片 -->
            <view class="flex-1 bg-[#f8fbff] rounded-[15rpx] p-[20rpx] border-[1rpx] border-[#e0e0e0]">
              <text class="text-[18rpx] mb-[15rpx] text-[#1a73e8] flex items-center"> <IconFont name="user-shield" class="mr-[10rpx] text-[20rpx]" /> 用户（监护人）信息 </text>
              <text class="text-[#666] leading-[1.6] text-[15rpx] block">对应客户端我的-服务对象个人基本信息中其它信息</text>
              <view class="mt-[15rpx]">
                <text class="block"><text class="font-semibold">监护人姓名：</text>{{ guardianInfo.name }}</text>
                <text class="block"><text class="font-semibold">关系：</text>{{ guardianInfo.relation }}</text>
                <text class="block"><text class="font-semibold">联系电话：</text>{{ guardianInfo.phone }}</text>
              </view>
            </view>

            <!-- 下单人信息卡片 -->
            <view class="flex-1 bg-[#f8fbff] rounded-[15rpx] p-[20rpx] border-[1rpx] border-[#e0e0e0]">
              <text class="text-[18rpx] mb-[15rpx] text-[#1a73e8] flex items-center"> <IconFont name="shopping-cart" class="mr-[10rpx] text-[20rpx]" /> 下单人信息 </text>
              <text class="text-[#666] leading-[1.6] text-[15rpx] block">对应客户端我的-服务对象个人基本信息中其它信息</text>
              <view class="mt-[15rpx]">
                <text class="block"><text class="font-semibold">下单人姓名：</text>{{ orderInfo.name }}</text>
                <text class="block"><text class="font-semibold">账户类型：</text>{{ orderInfo.accountType }}</text>
                <text class="block"><text class="font-semibold">最近下单：</text>{{ orderInfo.lastOrder }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="bg-[#f5f9ff] p-[25rpx_40rpx] flex justify-center border-t-[1rpx] border-t-[#eee]">
        <view class="flex gap-[25rpx]">
          <nut-button
            class="p-[14rpx_40rpx] rounded-[50rpx] text-[18rpx] font-semibold cursor-pointer transition-all duration-300 flex items-center shadow-[0_4rpx_15rpx_rgba(0,0,0,0.1)] bg-[#66bb6a] text-white hover:translate-y-[-3rpx] hover:shadow-[0_6rpx_20rpx_rgba(0,0,0,0.15)]"
            @click="saveInfo"
          >
            <IconFont name="success" class="mr-[10rpx]" /> 保存信息
          </nut-button>
          <nut-button
            class="p-[14rpx_40rpx] rounded-[50rpx] text-[18rpx] font-semibold cursor-pointer transition-all duration-300 flex items-center shadow-[0_4rpx_15rpx_rgba(0,0,0,0.1)] bg-white text-[#666] border-[1rpx] border-[#ddd] hover:translate-y-[-3rpx] hover:shadow-[0_6rpx_20rpx_rgba(0,0,0,0.15)]"
            @click="resetInfo"
          >
            <IconFont name="retweet" class="mr-[10rpx]" /> 重置修改
          </nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { IconFont } from '@nutui/icons-vue-taro'



const activeTab = ref(0);

// 用户基本信息
const userInfo = reactive({
  name: "张明",
  phone: "13800138000",
  idCard: "110105198001011234",
  healthCode: "已激活",
  anfinelId: "AFID20231015001",
  healthRecordId: "HA20231015001",
  otherId: "护照: E12345678",
  healthCard: "VIP健康服务卡号: VIP20231015",
  orderId: "ORD20231015001",
  memberId: "M20231015001",
  storedCardId: "SC20231015001",
  pointsCardId: "PC20231015001",
  address: "北京市朝阳区建国路88号丽晶苑8栋1201室",
  clientInfo: "我的-服务对象个人基本信息中其它信息",
});

// 监护人信息
const guardianInfo = reactive({
  name: "李华",
  relation: "配偶",
  phone: "13900139000",
});

// 下单人信息
const orderInfo = reactive({
  name: "张明",
  accountType: "主账户",
  lastOrder: "2023-10-10",
});

// 标签页列表
const tabs = ref([{ title: "基本信息" }, { title: "健康档案" }, { title: "服务记录" }, { title: "账户设置" }]);

// 保存信息
const saveInfo = () => {
  console.log("保存信息:", userInfo);
};

// 重置信息
const resetInfo = () => {
  console.log("重置信息");
};

// 返回上一页
const goBack = () => {
  console.log("返回上一页");
};
</script>

<style lang="scss" scoped></style>
